<template>
  <div>
    <!-- 上半部分信息 -->
    <Card>
      <!-- 保单信息-->
      <div v-if="assignmentInfo.insuranceType==='assign'">
        <Row class="assignment-header">
          <i-col span="6">
            <span>计划编号：</span>
            <span>{{assignmentInfo.row.planid}}</span>
          </i-col>
          <i-col span="6">
            <span class="conLabel">保单：</span>
            <span class="conInfo" v-if="assignmentInfo.row.contno">{{assignmentInfo.row.contno}}</span>
          </i-col>
          <i-col span="6">
            <span class="conLabel">备注：</span>
            <span class="conInfo" v-if="assignmentInfo.row.remark">{{assignmentInfo.row.remark}}</span>
          </i-col>
        </Row>
      </div>
      <span class="baseInfo">
        <span v-if="payWay">
          <Row>
            <i-col span="6">
              <div class="title">续期专员信息</div>
            </i-col>
          </Row>
          <Row>
            <i-col span="6">
              <span class="conLabel">续期专员：</span>
              <span
                class="conInfo"
                v-if="basicInformation1"
              >{{basicInformation1.name?basicInformation1.name+'-':''}}{{basicInformation1.reagentcode?basicInformation1.reagentcode:''}}</span>
            </i-col>
            <i-col span="10">
              <span class="conLabel">所属机构：</span>
              <span
                class="conInfo"
                v-if="basicInformation1"
              >{{basicInformation1.managecomname?basicInformation1.managecomname+' - ':''}}{{basicInformation1.managecom?basicInformation1.managecom:''}}</span>
            </i-col>
            <i-col span="6">
              <span class="conLabel">联系电话：</span>
              <span
                class="conInfo"
                v-if="basicInformation1"
              >{{basicInformation1.mobile?basicInformation1.mobile:''}}</span>
            </i-col>
          </Row>
        </span>
        <span v-if="row.contno != ''">
          <Row>
            <i-col span="2">
              <div class="title">业务员信息</div>
            </i-col>
            <Button
              v-if="basicInformation.agentdetail"
              :type="basicInformation.agentdetail.agentstate==='01' ? 'success':basicInformation.agentdetail.agentstate==='02'?'success':'error'"
              size="small"
              style="border-radius:12px;padding-left:20px;padding-right:20px;font-size:12px;height:20px"
            >{{basicInformation.agentdetail.agentstate==='01' ? '在职':basicInformation.agentdetail.agentstate==='02'?'在职':'离职'}}</Button>
          </Row>
          <Row>
            <i-col span="6">
              <span class="conLabel">业务员：</span>
              <span
                class="conInfo"
              >{{basicInformation.agentdetail && basicInformation.agentdetail.name?basicInformation.agentdetail.name+' - ':''}}{{basicInformation.agentdetail && basicInformation.agentdetail.agentcode?basicInformation.agentdetail.agentcode:''}}</span>
            </i-col>
            <i-col span="10">
              <span class="conLabel">所属机构：</span>
              <span
                class="conInfo"
              >{{basicInformation.agentdetail && basicInformation.agentdetail.managecomname?basicInformation.agentdetail.managecomname+' - ':''}}{{basicInformation.agentdetail && basicInformation.agentdetail.managecom?basicInformation.agentdetail.managecom:''}}</span>
            </i-col>
            <i-col span="6">
              <span class="conLabel">联系电话：</span>
              <span
                class="conInfo"
                v-if="basicInformation.agentdetail"
              >{{basicInformation.agentdetail.mobile}}</span>
            </i-col>
          </Row>
          <div class="title">保单信息
            <Tooltip placement="right" theme="light" v-if="basicInformation.customerdetail && (basicInformation.customerdetail.appntvalid || basicInformation.customerdetail.insuerdvalid || basicInformation.customerdetail.beneficiary)">
              <Icon type="ios-alert-outline" color="#ff9900" size="18" />
              <div slot="content">
                <span v-if="basicInformation.customerdetail.appntvalid">{{basicInformation.customerdetail.appntvalid?'投保人':''}}{{basicInformation.customerdetail.insuerdvalid || basicInformation.customerdetail.beneficiary?'、':''}}</span>
                <span v-if="basicInformation.customerdetail.insuerdvalid">{{basicInformation.customerdetail.insuerdvalid?'被保人':''}}{{basicInformation.customerdetail.beneficiary?'、':''}}</span>
                <span v-if="basicInformation.customerdetail.beneficiary">{{basicInformation.customerdetail.beneficiary?'受益人':''}}</span>证件有效期已过期！
              </div>
            </Tooltip>
          </div>
          <Row>
            <i-col span="6">
              <span class="conLabel">保单标志：</span>
              <span
                class="conInfo"
              >{{basicInformation.contdetail&&basicInformation.contdetail.contflagname?basicInformation.contdetail.contflagname:''}}</span>
            </i-col>
            <i-col span="6">
              <span
                class="conLabel"
                v-if="assignmentInfo.insuranceType == 'supervise' || assignmentInfo.insuranceType == 'charge'"
              >应交次数：</span>
              <span class="conLabel" v-else>已交次数：</span>
              <span
                class="conInfo"
              >{{basicInformation.contdetail&&basicInformation.contdetail.payyear?basicInformation.contdetail.payyear+"/":''}}{{basicInformation.contdetail&&basicInformation.contdetail.payyears?basicInformation.contdetail.payyears:''}}{{basicInformation.contdetail&&basicInformation.contdetail.payintvname?basicInformation.contdetail.payintvname:''}}</span>
            </i-col>
            <i-col span="6">
              <span class="conLabel">应交日：</span>
              <span
                class="conInfo"
              >{{basicInformation.contdetail&&basicInformation.contdetail.paytodate?basicInformation.contdetail.paytodate.substr(0,10):''}}</span>
            </i-col>
            <i-col span="6">
              <span class="conLabel">应交保费：</span>
              <span
                class="conInfo"
              >
              {{basicInformation.contdetail&&basicInformation.contdetail.paymoney?basicInformation.contdetail.paymoney:''}}元</span>
              <Tooltip placement="right" v-show="(basicInformation.contdetail.lastmainmoney+basicInformation.contdetail.lastsubmoney)!=basicInformation.contdetail.paymoney">
                  <Icon type="ios-help-circle-outline" style="color:#000" />
                  <div slot="content">
                    <div class="tooltipContent">上期主险保费：{{basicInformation.contdetail?basicInformation.contdetail.lastmainmoney:''}}元</div>
                    <div class="tooltipContent">上期附加险保费：{{basicInformation.contdetail?basicInformation.contdetail.lastsubmoney:''}}元</div>
                  </div>
                </Tooltip>
            </i-col>
          </Row>
          <Row>
            <i-col span="6">
              <span class="conLabel">主险：</span>
              <span
                class="conInfo"
              >{{basicInformation.contdetail&&basicInformation.contdetail.mainriskname?basicInformation.contdetail.mainriskname:''}}</span>
            </i-col>
            <i-col span="6">
              <span class="conLabel">主险保费：</span>
              <span
                class="conInfo"
              >{{basicInformation.contdetail&&basicInformation.contdetail.mainpolpaymoney?basicInformation.contdetail.mainpolpaymoney:''}}元</span>
            </i-col>
            <i-col span="6" class="risk">
              <span class="conLabel">附险：</span>
              <span
                class="conInfo subRisk"
                v-if="basicInformation.contdetail&&basicInformation.contdetail.subpol"
              >
                <div v-for="(item,index) in basicInformation.contdetail.subpol" :key="index">
                  {{item.riskname?item.riskname:''}}{{item.subprem === '' ||item.subprem === null ?'':item.subprem+'元'}}
                  <br />
                </div>
              </span>
            </i-col>
            <i-col span="6">
              <span class="conLabel">附险保费：</span>
              <span
                class="conInfo"
              >{{basicInformation.contdetail&&basicInformation.contdetail.totalsubpolmoney?basicInformation.contdetail.totalsubpolmoney:''}}元</span>
            </i-col>
          </Row>
          <Row>
            <i-col span="6">
              <span class="conLabel">扣款失败原因：</span>
              <span
                class="conInfo"
              >{{basicInformation.contdetail&&basicInformation.contdetail.banksuccflagname?basicInformation.contdetail.banksuccflagname:''}}</span>
            </i-col>
          </Row>
          <div class="title">投/被保人信息</div>
          <Row>
            <i-col span="6">
              <span class="conLabel">投保人：</span>
              <span class="conInfo">
                {{basicInformation.contdetail&&basicInformation.customerdetail.appntname?basicInformation.customerdetail.appntname:''}}
                <Tooltip placement="right">
                  <Icon type="ios-help-circle-outline" style="color:#000" />
                  <div
                    slot="content"
                    v-if="basicInformation.customerdetail && basicInformation.customerdetail.customerprotrayal"
                  >
                    <div
                      class="tooltipContent"
                      v-for="(item,index) in basicInformation.customerdetail.customerprotrayal"
                      :key="index"
                    >{{item}}</div>
                  </div>
                </Tooltip>
              </span>
            </i-col>
            <i-col span="6">
              <span class="conLabel">投保人性别：</span>
              <span
                class="conInfo"
              >{{basicInformation.customerdetail?basicInformation.customerdetail.appntsexname:''}}</span>
            </i-col>
            <i-col span="6">
              <span class="conLabel">投保人出生日期：</span>
              <span
                class="conInfo"
              >{{(basicInformation.customerdetail?basicInformation.customerdetail.appntbirthday:'') | filterdate}}</span>
            </i-col>
            <i-col span="6">
              <span class="conLabel">投保人电话：</span>
              <span
                class="conInfo"
              >{{basicInformation.customerdetail ? basicInformation.customerdetail.appntphone : ''}}</span>
            </i-col>
            
          </Row>
          <Row>
            
            <i-col span="6">
              <span class="conLabel">被保人：</span>
              <span
                class="conInfo"
              >{{basicInformation.customerdetail?basicInformation.customerdetail.insuredname:''}}</span>
            </i-col>
            <i-col span="6">
              <span class="conLabel">被保人性别：</span>
              <span
                class="conInfo"
              >{{basicInformation.customerdetail?basicInformation.customerdetail.insuredsexname:''}}</span>
            </i-col>
            <i-col span="6">
              <span class="conLabel">关系：</span>
              <span
                class="conInfo"
              >{{basicInformation.customerdetail?basicInformation.customerdetail.relation:''}}</span>
            </i-col>
            <i-col span="6">
              <span class="conLabel">被保人出生日期：</span>
              <span
                class="conInfo"
              >{{(basicInformation.customerdetail?basicInformation.customerdetail.insuredbirthday:'') | filterdate}}</span>
            </i-col>
            
          </Row>
          <Row>
            <i-col span="6">
              <span class="conLabel">被保人电话：</span>
              <span
                class="conInfo"
              >{{basicInformation.customerdetail ? basicInformation.customerdetail.insuredphone : ''}}</span>
            </i-col>
            <i-col span="6">
              <span class="conLabel">联系地址：</span>
              <span
                class="conInfo"
              >{{basicInformation.customerdetail?basicInformation.customerdetail.appntpostaladdress:'' ? basicInformation.customerdetail.appntpostaladdress : ''}}</span>
            </i-col>
            <i-col span="6">
              <span class="conLabel">银行：</span>
              <span
                class="conInfo"
              >{{basicInformation.customerdetail?basicInformation.customerdetail.bankname:''}}</span>
            </i-col>
            <i-col span="6">
              <span class="conLabel">银行卡号：</span>
              <!-- 银行卡号倒数第5-8位显示为“*”号 -->
              <span
                class="conInfo"
              >{{basicInformation.customerdetail?basicInformation.customerdetail.bankaccno:''}}</span>
            </i-col>
          </Row>
        </span>
      </span>
    </Card>
    <!-- 服务记录 -->
    <Card style="margin-top:20px" v-if="payWay">
      <div>服务记录</div>
      <Divider></Divider>
      <div v-if="serviceRecord || serviceRecord1">
        <div v-if="serviceRecord1">
          <Timeline v-for="(serviceRecord2,index) in serviceRecord1" :key="index">
            <TimelineItem v-for="(item,index) in serviceRecord2" :key="index">
              <div class="modalTitle">
                <Row gutter="10">
                  <i-col span="6">
                    <span>工作日期：</span>
                    <span>{{item.updateTime?item.updateTime:''}}</span>
                  </i-col>
                  <i-col span="5">
                    <span
                      class="conLabel"
                      v-if="assignmentInfo.insuranceType == 'supervise' || assignmentInfo.insuranceType == 'charge'"
                    >应交次数：</span>
                    <span class="conLabel" v-else>已交次数：</span>
                    <span
                      class="gray"
                    >{{item.payyear?item.payyear+"/":''}}{{item.payyears?item.payyears:''}}{{item.payintv?item.payintv:''}}</span>
                  </i-col>
                  <i-col span="5">
                    <span>工作方式：</span>
                    <span class="gray">{{item.worktype?item.worktype:''}}</span>
                  </i-col>
                </Row>
              </div>
              <div class="modalContent">
                <Row gutter="5">
                  <i-col span="4">
                    <span>处理人：</span>
                    <span>{{item.workname?item.workname:''}}</span>
                    <Button type="default" size="small" class="waiqin">
                      <span style="font-size:12px">{{item.role}}</span>
                    </Button>
                  </i-col>
                  <i-col span="4">
                    <span>收费状态预估：</span>
                    <span
                      class="gray"
                    >{{item.estimatestate==='0'?'可回收':item.estimatestate==='1'?'收费困难':item.estimatestate==='2'?'不可回收':''}}</span>
                  </i-col>
                  <i-col span="4">
                    <span>预估交费难度：</span>
                    <span class="gray">{{item.difficulty?item.difficulty+'级':''}}</span>
                  </i-col>
                  <i-col span="4">
                    <span>交费时间预估：</span>
                    <span class="gray" v-if="item.estimatedate">{{item.estimatedate.substr(0,10)}}</span>
                  </i-col>
                  <i-col span="4">
                    <span>是否联系成功：</span>
                    <span class="gray">{{item.linksuccessflag==="0"?'是':'否'}}</span>
                  </i-col>
                  <i-col span="4">
                    <span>主管陪访：</span>
                    <span class="gray">{{item.orderwith?item.orderwith:'否'}}</span>
                  </i-col>
                </Row>
                <div class="reasonDetail">
                  <span>未收原因说明</span>
                  <span v-for="(t2,index) in item.reasonByCompany" :key="index">
                    <Button size="small" class="reasonBtn">{{t2}}</Button>
                  </span>
                  <span v-for="(t3,index) in item.reasonByCustomer" :key="index">
                    <Button size="small" class="reasonBtn">{{t3}}</Button>
                  </span>
                  <span v-if="item.reasonByother">
                    <Button size="small" class="reasonBtn">{{item.reasonByother}}</Button>
                  </span>
                </div>
                <div class="reasonDetail">
                  <span>工作结果记录</span>
                  <span v-for="(t2,index) in item.workresultid" :key="index">
                    <Button size="small" class="reasonBtn">{{t2}}</Button>
                  </span>
                  <!-- <span v-if="item.workresultid">
                    <Button size="small" class="reasonBtn">{{item.workresultid}}</Button>
                  </span>-->
                </div>
                <div class="reasonDetail">
                  <span class="gray">{{item.workresult}}</span>
                </div>
                <div class="reasonDetail">
                  <span>实时扣款：{{item.paystate}}</span>
                </div>
                <div class="reasonDetail">
                  <Button
                    v-if="item.recordingaddress"
                    type="success"
                    size="small"
                    class="waiqin"
                    @click="phoneRecordShow(item)"
                  >电话录音</Button>
                  <Modal
                    footer-hide="true"
                    :value="phoneRecord"
                    :mask-closable="false"
                    :closable="false"
                    width="600"
                    :styles="{top: '200px'}"
                  >
                    <span slot="header" style="color:#fff;font-size:14px">电话录音下载</span>
                    <Table :columns="phoneRecordColumns" :data="phoneRecordData" border>
                      <template slot-scope="{ row }" slot="audio">
                        <div @click="playOrPause(row)">
                          <Icon class="playBtn" v-if="row.handleplayOrPause" type="ios-pause"/>
                          <Icon class="playBtn" v-else type="ios-play" />
                        </div>
                      </template>
                      <template slot-scope="{row}" slot="opration">
                        {{row.opration}}
                        <Button
                          type="success"
                          size="small"
                          style="border-radius:12px;padding-left:20px;padding-right:20px;"
                          @click="downloadPhoneRecord(row)"
                        >下载</Button>
                      </template>
                    </Table>
                    <Button
                      type="primary"
                      @click="modalVisibleChange3"
                      style="float:right;margin-top:20px"
                    >返回</Button>
                    <div class="clearBoth"></div>
                  </Modal>
                  <Button
                    v-if="item.notedetail"
                    type="success"
                    size="small"
                    class="waiqin"
                    @click="messageContentShow(item)"
                  >短信内容</Button>
                  <Modal
                    transfer
                    footer-hide="true"
                    :value="messageContent"
                    :mask-closable="false"
                    :closable="false"
                    width="703"
                    :styles="{top: '200px'}"
                  >
                    <span slot="header" style="color:#fff;font-size:14px">短信内容</span>
                    <Table :columns="messageContentColumns" :data="messageContentData" border></Table>
                    <Button
                      type="primary"
                      @click="modalVisibleChange4"
                      style="float:right;margin-top:20px"
                    >返回</Button>
                    <div class="clearBoth"></div>
                  </Modal>
                </div>
                <div class="reasonDetail">
                  <span>
                    <Button
                      v-if="item.facecontent"
                      type="success"
                      size="small"
                      class="waiqin"
                      @click="interviewShow(item)"
                    >面访联系图片</Button>
                  </span>
                  <span>
                    <Button
                      v-if="item.netcontent"
                      type="success"
                      size="small"
                      class="waiqin"
                      @click="internetShow(item)"
                    >网络联系图片</Button>
                  </span>
                </div>
                <!-- 面访联系图片对话框  -->
                <Modal
                  footer-hide="true"
                  :value="interviewModal"
                  :mask-closable="false"
                  :closable="false"
                  width="600"
                  :styles="{top: '200px'}"
                >
                  <span slot="header" style="color:#fff;font-size:14px">面访联系图片</span>
                  <Table :columns="interviewColumns" :data="interviewData" border>
                    <template slot-scope="{ row }" slot="audio">
                      <div @click="showFile(row)">
                        <Icon type="md-image" v-if="row.icon=='image'" style="font-size:20px" />
                        <Icon type="ios-paper" v-if="row.icon=='paper'" style="font-size:20px" />
                      </div>
                    </template>
                    <template slot-scope="{row}" slot="opration">
                      {{row.opration}}
                      <Button
                        type="success"
                        size="small"
                        style="border-radius:12px;padding-left:20px;padding-right:20px;"
                        @click="downloadInterview(row.id)"
                      >下载</Button>
                    </template>
                  </Table>
                  <Button
                    type="primary"
                    @click="interviewModal=false"
                    style="float:right;margin-top:20px"
                  >返回</Button>
                  <div class="clearBoth"></div>
                </Modal>
                <!-- 网络联系图片 -->
                <Modal
                  transfer
                  footer-hide="true"
                  :value="internetModal"
                  :mask-closable="false"
                  :closable="false"
                  width="600"
                  :styles="{top: '200px'}"
                >
                  <span slot="header" style="color:#fff;font-size:14px">网络联系图片</span>
                  <Table :columns="internetColumns" :data="internetData" border>
                    <template slot-scope="{ row }" slot="audio">
                      <div @click="showFile(row)">
                        <Icon type="md-image" v-if="row.icon=='image'" style="font-size:20px" />
                        <Icon type="ios-paper" v-if="row.icon=='paper'" style="font-size:20px" />
                      </div>
                    </template>
                    <template slot-scope="{row}" slot="opration">
                      {{row.opration}}
                      <Button
                        type="success"
                        size="small"
                        style="border-radius:12px;padding-left:20px;padding-right:20px;"
                        @click="downloadInternet(row.id)"
                      >下载</Button>
                    </template>
                  </Table>
                  <Button
                    type="primary"
                    @click="internetModal=false"
                    style="float:right;margin-top:20px"
                  >返回</Button>
                  <div class="clearBoth"></div>
                </Modal>
                <div class="reasonDetail">
                  <div v-for="( ti,index) in item.professionalCommentVOS" :key="index">
                    <span>{{ti.commentname}}点评：</span>
                    <Rate v-model="ti.level" disabled />
                    <span class="gray">{{ti.comment}}</span>
                    <span style="margin:0 10px">{{ ti.createTime }}</span>
                    <Button type="error" class="waiqin" @click="delRate(ti.id)">删除</Button>
                  </div>
                </div>
                <!-- <Row gutter="10">
                  <i-col span="21">
                    <i-input v-model="item.rateAdvice" placeholder="请输入点评内容">
                      <span slot="prepend">
                        <Rate clearable v-model="item.userRate" />
                      </span>
                    </i-input>
                  </i-col>
                  <i-col span="3">
                    <Button type="primary" @click="submitRate(item)">提交</Button>
                  </i-col>
                </Row>-->
              </div>
            </TimelineItem>
            <div v-if="serviceRecord2.length !==0">
              <TimelineItem
                v-for="(item,index) in serviceRecord2[0].payFinishVOS"
                :key="index"
                :color="item.finishstate==='交费完成'?'green':'red'"
              >
                <span
                  class="time mr20"
                >{{item.finishstate}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{item.lastpaytodate}}</span>
                <span
                  class="conLabel"
                  v-if="assignmentInfo.insuranceType == 'supervise' || assignmentInfo.insuranceType == 'charge'"
                >应交次数：</span>
                <span class="conLabel" v-else>已交次数：</span>
                <span class="content">{{item.paycount+'/'+item.payyears+''+item.payintvname}}</span>
              </TimelineItem>
            </div>
          </Timeline>
        </div>
        <div v-else>
          <Timeline>
            <TimelineItem v-for="(item,index) in serviceRecord" :key="index">
              <div class="modalTitle">
                <Row gutter="10">
                  <i-col span="6">
                    <span>工作日期：</span>
                    <span>{{item.updateTime?item.updateTime:''}}</span>
                  </i-col>
                  <i-col span="5">
                    <span
                      class="conLabel"
                      v-if="assignmentInfo.insuranceType == 'supervise' || assignmentInfo.insuranceType == 'charge'"
                    >应交次数：</span>
                    <span class="conLabel" v-else>已交次数：</span>
                    <span
                      class="gray"
                    >{{item.payyear?item.payyear+"/":''}}{{item.payyears?item.payyears:''}}{{item.payintv?item.payintv:''}}</span>
                  </i-col>
                  <i-col span="5">
                    <span>工作方式：</span>
                    <span class="gray">{{item.worktype?item.worktype:''+item.payintvname}}</span>
                  </i-col>
                </Row>
              </div>
              <div class="modalContent">
                <Row gutter="5">
                  <i-col span="4">
                    <span>处理人：</span>
                    <span>{{item.workname?item.workname:''}}</span>
                    <Button type="default" size="small" class="waiqin">
                      <span style="font-size:12px">{{item.role}}</span>
                    </Button>
                  </i-col>
                  <i-col span="4">
                    <span>收费状态预估：</span>
                    <span
                      class="gray"
                    >{{item.estimatestate==='0'?'可回收':item.estimatestate==='1'?'收费困难':item.estimatestate==='2'?'不可回收':''}}</span>
                  </i-col>
                  <i-col span="4">
                    <span>预估交费难度：</span>
                    <span class="gray">{{item.difficulty?item.difficulty+'级':''}}</span>
                  </i-col>
                  <i-col span="4">
                    <span>交费时间预估：</span>
                    <span class="gray" v-if="item.estimatedate">{{item.estimatedate.substr(0,10)}}</span>
                  </i-col>
                  <i-col span="4">
                    <span>是否联系成功：</span>
                    <span class="gray">{{item.linksuccessflag==="0"?'是':'否'}}</span>
                  </i-col>
                  <i-col span="4">
                    <span>主管陪访：</span>
                    <span class="gray">{{item.orderwith?item.orderwith:'否'}}</span>
                  </i-col>
                </Row>
                <div class="reasonDetail">
                  <span>未收原因说明</span>
                  <span v-for="(t2,index) in item.reasonByCompany" :key="index">
                    <Button size="small" class="reasonBtn">{{t2}}</Button>
                  </span>
                  <span v-for="(t3,index) in item.reasonByCustomer" :key="index">
                    <Button size="small" class="reasonBtn">{{t3}}</Button>
                  </span>
                  <span v-if="item.reasonByother">
                    <Button size="small" class="reasonBtn">{{item.reasonByother}}</Button>
                  </span>
                </div>
                <div class="reasonDetail">
                  <span>工作结果记录</span>
                  <span v-for="(t2,index) in item.workresultid" :key="index">
                    <Button size="small" class="reasonBtn">{{t2}}</Button>
                  </span>
                  <!-- <span v-if="item.workresultid">
                    <Button size="small" class="reasonBtn">{{item.workresultid}}</Button>
                  </span>-->
                </div>
                <div class="reasonDetail">
                  <span class="gray">{{item.workresult}}</span>
                </div>
                <div class="reasonDetail">
                  <span>实时扣款：{{item.paystate}}</span>
                </div>
                <div class="reasonDetail">
                  <Button
                    v-if="item.recordingaddress"
                    type="success"
                    size="small"
                    class="waiqin"
                    @click="phoneRecordShow(item)"
                  >电话录音</Button>
                  <Modal
                    footer-hide="true"
                    :value="phoneRecord"
                    :mask-closable="false"
                    :closable="false"
                    width="600"
                    :styles="{top: '200px'}"
                  >
                    <span slot="header" style="color:#fff;font-size:14px">电话录音下载</span>
                    <Table :columns="phoneRecordColumns" :data="phoneRecordData" border>
                      <template slot-scope="{ row }" slot="audio">
                        <div @click="playOrPause(row)">
                          <Icon class="playBtn" v-if="row.handleplayOrPause" type="ios-pause"/>
                          <Icon class="playBtn" v-else type="ios-play" />
                        </div>
                      </template>
                      <template slot-scope="{row}" slot="opration">
                        {{row.opration}}
                        <Button
                          type="success"
                          size="small"
                          style="border-radius:12px;padding-left:20px;padding-right:20px;"
                          @click="downloadPhoneRecord(row)"
                        >下载</Button>
                      </template>
                    </Table>
                    <Button
                      type="primary"
                      @click="modalVisibleChange3"
                      style="float:right;margin-top:20px"
                    >返回</Button>
                    <div class="clearBoth"></div>
                  </Modal>
                  <Button
                    v-if="item.notedetail"
                    type="success"
                    size="small"
                    class="waiqin"
                    @click="messageContentShow(item)"
                  >短信内容</Button>
                  <Modal
                    transfer
                    footer-hide="true"
                    :value="messageContent"
                    :mask-closable="false"
                    :closable="false"
                    width="703"
                    :styles="{top: '200px'}"
                  >
                    <span slot="header" style="color:#fff;font-size:14px">短信内容</span>
                    <Table :columns="messageContentColumns" :data="messageContentData" border></Table>
                    <Button
                      type="primary"
                      @click="modalVisibleChange4"
                      style="float:right;margin-top:20px"
                    >返回</Button>
                    <div class="clearBoth"></div>
                  </Modal>
                </div>
                <div class="reasonDetail">
                  <span>
                    <Button
                      v-if="item.facecontent"
                      type="success"
                      size="small"
                      class="waiqin"
                      @click="interviewShow(item)"
                    >面访联系图片</Button>
                  </span>
                  <span>
                    <Button
                      v-if="item.netcontent"
                      type="success"
                      size="small"
                      class="waiqin"
                      @click="internetShow(item)"
                    >网络联系图片</Button>
                  </span>
                </div>
                <!-- 面访联系图片对话框  -->
                <Modal
                  footer-hide="true"
                  :value="interviewModal"
                  :mask-closable="false"
                  :closable="false"
                  width="600"
                  :styles="{top: '200px'}"
                >
                  <span slot="header" style="color:#fff;font-size:14px">面访联系图片</span>
                  <Table :columns="interviewColumns" :data="interviewData" border>
                    <template slot-scope="{ row }" slot="audio">
                      <div @click="showFile(row)">
                        <Icon type="md-image" v-if="row.icon=='image'" style="font-size:20px" />
                        <Icon type="ios-paper" v-if="row.icon=='paper'" style="font-size:20px" />
                      </div>
                    </template>
                    <template slot-scope="{row}" slot="opration">
                      {{row.opration}}
                      <Button
                        type="success"
                        size="small"
                        style="border-radius:12px;padding-left:20px;padding-right:20px;"
                        @click="downloadInterview(row.id)"
                      >下载</Button>
                    </template>
                  </Table>
                  <Button
                    type="primary"
                    @click="interviewModal=false"
                    style="float:right;margin-top:20px"
                  >返回</Button>
                  <div class="clearBoth"></div>
                </Modal>
                <!-- 网络联系图片 -->
                <Modal
                  transfer
                  footer-hide="true"
                  :value="internetModal"
                  :mask-closable="false"
                  :closable="false"
                  width="600"
                  :styles="{top: '200px'}"
                >
                  <span slot="header" style="color:#fff;font-size:14px">网络联系图片</span>
                  <Table :columns="internetColumns" :data="internetData" border>
                    <template slot-scope="{ row }" slot="audio">
                      <div @click="showFile(row)">
                        <Icon type="md-image" v-if="row.icon=='image'" style="font-size:20px" />
                        <Icon type="ios-paper" v-if="row.icon=='paper'" style="font-size:20px" />
                      </div>
                    </template>
                    <template slot-scope="{row}" slot="opration">
                      {{row.opration}}
                      <Button
                        type="success"
                        size="small"
                        style="border-radius:12px;padding-left:20px;padding-right:20px;"
                        @click="downloadInternet(row.id)"
                      >下载</Button>
                    </template>
                  </Table>
                  <Button
                    type="primary"
                    @click="internetModal=false"
                    style="float:right;margin-top:20px"
                  >返回</Button>
                  <div class="clearBoth"></div>
                </Modal>
                <div class="reasonDetail">
                  <div v-for="( ti,index) in item.professionalCommentVOS" :key="index">
                    <span>{{ti.commentname}}点评：</span>
                    <Rate v-model="ti.level" disabled />
                    <span class="gray">{{ti.comment}}</span>
                    <span style="margin:0 10px">{{ ti.createTime }}</span>
                    <Button type="error" class="waiqin" @click="delRate(ti.id)">删除</Button>
                  </div>
                </div>
                <!-- <Row gutter="10">
                  <i-col span="21">
                    <i-input v-model="item.rateAdvice" placeholder="请输入点评内容">
                      <span slot="prepend">
                        <Rate clearable v-model="item.userRate" />
                      </span>
                    </i-input>
                  </i-col>
                  <i-col span="3">
                    <Button type="primary" @click="submitRate(item)">提交</Button>
                  </i-col>
                </Row>-->
              </div>
            </TimelineItem>
            <div v-if="serviceRecord.length !==0">
              <TimelineItem
                v-for="(item,index) in serviceRecord[0].payFinishVOS"
                :key="index"
                :color="item.finishstate==='交费完成'?'green':'red'"
              >
                <span
                  class="time mr20"
                >{{item.finishstate}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{item.lastpaytodate}}</span>
                <span
                  class="conLabel"
                  v-if="assignmentInfo.insuranceType == 'supervise' || assignmentInfo.insuranceType == 'charge'"
                >应交次数：</span>
                <span class="conLabel" v-else>已交次数：</span>
                <span class="content">{{item.paycount+'/'+item.payyears+''+item.payintvname}}</span>
              </TimelineItem>
            </div>
          </Timeline>
        </div>
      </div>
    </Card>
    <!-- 显示图片 -->
    <Modal
      footer-hide="true"
      v-model="handleShowFile"
      width="1200px"
      title="在线预览"
    >
      <img style="width:100%;height:100%" :src="biggerPath" alt="" title="如需下载请右击" />
    </Modal>
  </div>
</template>

<script>
import {exportFile,visitFile} from "../../../util/util"
export default {
  data() {
    return {
      row: this.$route.query.row,
      phoneRecord: false,
      messageContent: false,
      interviewModal: false,
      internetModal: false,
      // 上半部分数据
      basicInformation: {
        showbaseflag: "",
        showpayflag: "",
        agentdetail: "",
        contdetail: {},
        customerdetail: {},
        workdetailValueMapsVO: {},
        sendmessagetips: {}
      },
      basicInformation1: {},
      // 下半部分数据
      serviceRecord: "",
      // 交办件数据
      assignmentInfo: "",
      // 电话录音表格
      phoneRecordColumns: [
        {
          title: "时间",
          key: "createTime",
          width: "180"
        },
        {
          title: "文件",
          key: "src",
          width: "80",
          slot: "audio"
        },
        {
          title: "名称",
          key: "recordingaddress",
          width: "180"
        },
        {
          title: "操作",
          key: "opration",
          slot: "opration"
        }
      ],
      phoneRecordData: [
        {
          time: "2019-11-11 08:22:22",
          name: "电话录音文件1"
        }
      ],
      // 短信表格
      messageContentColumns: [
        {
          title: "发送时间",
          key: "createTime",
          width: "180"
        },
        {
          title: "发送对象",
          key: "persionid",
          width: "100"
        },
        {
          title: "发送内容",
          key: "messagecontent"
        }
      ],
      messageContentData: [
        {
          sendTime: "2019-11-11 08:22:22",
          sendPerson: "张宁",
          sendContent:
            "粘稠度】标签说明每天更新标签，截止至昨天最新数据【交费习惯】标签说明每年1.1号对所有续期用户进行标签更新，计算前两年内续期保单交费时间所在宽限期天数，默认为“一般”，若其他条件，则显示标签中最重要的。显示顺序为拖沓＞及时＞准时忙碌时间段】标签说明每年1.1号对所有续期用户进行标签更新，计算前两年内专员录入“未拨通”、“客户挂断电话”情况，对应所在时间段"
        }
      ],
      // 面访联系表格
      interviewColumns: [
        {
          title: "时间",
          key: "createTime",
          width: "180"
        },
        {
          title: "文件",
          key: "src",
          width: "80",
          slot: "audio"
        },
        {
          title: "名称",
          key: "path",
          width: "180"
        },
        {
          title: "操作",
          key: "opration",
          slot: "opration"
        }
      ],
      interviewData: [
        {
          time: "2019-11-11 08:22:22",
          name: "电话录音文件1"
        }
      ],
      // 网络联系表格
      internetColumns: [
        {
          title: "时间",
          key: "createTime",
          width: "180"
        },
        {
          title: "文件",
          key: "src",
          width: "80",
          slot: "audio"
        },
        {
          title: "名称",
          key: "path",
          width: "180"
        },
        {
          title: "操作",
          key: "opration",
          slot: "opration"
        }
      ],
      internetData: [
        {
          time: "2019-11-11 08:22:22",
          name: "电话录音文件1"
        }
      ],
      // 星级记录
      RateList: [
        {
          name: "吴晗",
          rateValue: "2",
          advice: "继续努力",
          index: "1"
        },
        {
          name: "吴是",
          rateValue: "3",
          advice: "继续努力",
          index: "2"
        }
      ],
      // 未收原因说明
      notReceiveReasonList: [
        {
          reason: "业务员投保"
        },
        {
          reason: "家庭原因"
        }
      ],
      // 工作结果
      workResultList: [
        {
          workResult: "客户明确不交费"
        },
        {
          workResult: "家庭原因"
        }
      ],
      contactList: [
        {
          contactType: "电话联系",
          contactImage: "图片.jpg"
        },
        {
          contactType: "面访联系",
          contactImage: "图片.jpg"
        }
      ],
      rateValue: 0,
      rateAdvice: "",
      payWay: true,
      // 保单查询进入服务详情的服务记录
      serviceRecord1: "",
      handleplayOrPause:false,
      handleShowFile:false,
      biggerPath:'',
      audioUrl:new Audio(),
      audioid:'',
    };
  },
  filters: {
    filterdate: function (e) {
      if (e) {
        return e.slice(0, 10)
      }
    }
  },
  methods: {
    // 显示图片
    showFile(row){
      if (row.ext=='jpg' || row.ext=='png' || row.ext=='jpeg') {
        this.biggerPath = row.photoUrl
        this.handleShowFile = true
      }else if(row.ext=='pdf'){
        let type = row.photoUrl.split('type=')[1]
        let obj = {
          id:row.id,
          worktype: type
        }
        visitFile("scrm-uer/api/fileDownload/downloadWork", obj);
      }else{
        this.$Message.info("该文件不支持在线预览，请下载到本地后打开")
      }
    },
    //播放完毕执行
    overAudio(){
      console.log('播放声音完毕');
      let arr = this.phoneRecordData
      this.phoneRecordData = []
      arr.forEach(item=>{
        if (this.audioid == item.id) {
          item.handleplayOrPause = false
        }
        this.phoneRecordData.push(item)
      })
    },
    //播放
    playOrPause(data) {
      let arr = this.phoneRecordData
      this.phoneRecordData = []
      arr.forEach(item=>{
        if (data.id == item.id) {
          if (!item.handleplayOrPause) {
            this.audioUrl.src = item.photoUrl
            this.audioid = data.id
            this.audioUrl.play()
            item.handleplayOrPause = true
            this.audioUrl.onended = ()=>{
              this.overAudio()
            }
          }else{
            this.audioUrl.pause()
            item.handleplayOrPause = false
          }
        }else{
          item.handleplayOrPause = false
        }
        this.phoneRecordData.push(item)
      })
    },
    // 电话录音对话框点击显示
    async phoneRecordShow({ plainid, workid }) {
      let res = await this.api.recordingInfo({
        plainid,
        workid
      });
      this.phoneRecordData = res.data;
      this.phoneRecordData.forEach(item=>{
        item.handleplayOrPause = false
      })
      this.phoneRecord = true;
    },
    // 对话框关闭
    modalVisibleChange3() {
      this.phoneRecord = false;
      this.audioUrl.pause()
    },
    // 短信内容对话框点击显示
    async messageContentShow({ plainid, workid }) {
      let res = await this.api.smsData({
        plainid,
        workid
      });
      this.messageContentData = res.data;
      console.log(res.data);
      this.messageContent = true;
    },
    // 对话框关闭
    modalVisibleChange4() {
      this.messageContent = false;
    },
    // 面访对话框显示
    async interviewShow({ plainid, workid }) {
      let res = await this.api.interviewPicturesInfo({
        plainid,
        workid
      });
      this.interviewData = res.data;
      this.interviewData.forEach((item,index)=>{
        let arr = item.path.split('.');
        let ext = arr[arr.length-1];
        item.ext = ext
        if(ext=='jpg'||ext=='png'||ext=='jpeg'){
          item.icon = 'image'
        }else{
          item.icon = 'paper'
        }
      })
      this.interviewModal = true;
    },
    // 网络对话框
    async internetShow({ plainid, workid }) {
      let res = await this.api.internetPicturesInfo({
        plainid,
        workid
      });
      this.internetData = res.data;
      this.internetData.forEach((item,index)=>{
        let arr = item.path.split('.');
        let ext = arr[arr.length-1];
        item.ext = ext
        if(ext=='jpg'||ext=='png'||ext=='jpeg'){
          item.icon = 'image'
        }else{
          item.icon = 'paper'
        }
      })
      this.internetModal = true;
    },
    // 星级改变
    rateChange(value) {
      // console.log(value, this.row);
    },
    variable() {
      // console.log(this.row,'111')
      if (this.$route.query.row.payintvname === "趸交") {
        this.payWay = false;
      }
    },
    // 获取页面数据
    async getBasicStatisticsInfo({
      planid,
      agentcode,
      contno,
      reagentcode,
      paytodate
    }) {
      // console.log(planid, agentcode);
      // 三个信息
      let res = await this.api.workStatusBasicStatisticsInfo({
        planid,
        agentcode,
        contno,
        visitType: 0,
        reagentcode
      });
      // 续期专员信息
      let res1 = await this.api.workStatusBasicStatisticsInfo1({ reagentcode });
      // 服务记录
      let res2 = await this.api.workStatusServiceRecord({
        planid,
        contno,
        paytodate
      });
      this.basicInformation = res.data;
      this.basicInformation1 = res1.data;
      this.serviceRecord = res2.data;
    },
    // 添加评价
    async submitRate(item) {
      console.log(item);
      let { workid, plainid, userRate, rateAdvice } = item;
      let res = await this.api.sublimeRate({
        workid,
        planid: plainid,
        level: userRate,
        comment: rateAdvice
      });
      if (res.code === 200) {
        this.$Message.success("评论信息提交成功！");
        this.getBasicStatisticsInfo(this.$route.query.row);
        (item.userRate = ""), (item.rateAdvice = "");
      }
    },
    // 删除评价
    async delRate(id) {
      let res = await this.api.deleteRate({ id });
      if (res.code === 200) {
        this.$Message.success("删除成功！");
        this.getBasicStatisticsInfo(this.$route.query.row);
      } else {
        this.$Message.info("不支持删除其他用户的评论");
      }
    },

    downloadPhoneRecord(row) {
      let obj = {
        id:row.id,
        worktype:"phone"
      }
      // window.open(
      //   `../rest/fileDownload/downloadWork?id=${row.id}&&worktype=phone`
      // )
      exportFile("scrm-gateway/scrm-uer/api/fileDownload/downloadWork",obj)
    },
    downloadInterview(id) {
      let obj = {
        id,
        worktype:"interview"
      }
      // window.open(
      //   `../rest/fileDownload/downloadWork?id=${id}&&worktype=interview`
      // )
      exportFile("scrm-gateway/scrm-uer/api/fileDownload/downloadWork",obj)
    },
    downloadInternet(id) {
      let obj = {
        id,
        worktype:"net"
      }
      // window.open(`../rest/fileDownload/downloadWork?id=${id}&&worktype=net`)
      exportFile("scrm-gateway/scrm-uer/api/fileDownload/downloadWork",obj)
    },
    // 查询不同位置的基础信息
    async getSelectBaseInformation({ contno }) {
      // console.log(contno, "222");
      let res = await this.api.selectBaseInformation({ contno });
      let res1 = await this.api.selectreagentInformation({ contno });
      this.basicInformation = res.data;
      this.basicInformation1 = res1.data;
      // console.log(this.basicInformation.agentdetail);
    },
    // 查询下半部分信息
    async getBottomInfo({ contno }) {
      let res = await this.api.selectallworkdetail({ contno });
      this.serviceRecord1 = res.data.allProfessionalWorkdetail;
      // console.log(this.serviceRecord1, "this.serviceRecord1");
    }
  },
  mounted() {
    this.variable();
  },
  created() {
    this.assignmentInfo = this.$route.query;
    // console.log(this.$route.query);
    if (this.$route.query.type === "policyEnquiry") {
      if (this.$route.query.row.payintvname === "趸交") {
        this.getSelectBaseInformation(this.$route.query.row);
      } else {
        console.log(111);
        this.getSelectBaseInformation(this.$route.query.row);
        this.getBottomInfo(this.$route.query.row);
      }
    } else {
      this.getBasicStatisticsInfo(this.$route.query.row);
    }
  },
  beforeDestroy() {
    this.phoneRecordData = null
  }
};
</script>
<style scoped lang="less">
.assignment-header {
  color: rgba(24, 144, 255, 1);
  margin: 5px 0;
  font-size: 16px;
  font-weight: 600;
}
.mr20 {
  margin-right: 20px;
}
@import "./index";
</style>

<style>
.demo-spin-icon-load{
  animation: ani-demo-spin 1s linear infinite;
}
@keyframes ani-demo-spin {
  from { transform: rotate(0deg);}
  50%  { transform: rotate(180deg);}
  to   { transform: rotate(360deg);}
}
.ivu-input-group-prepend {
  background-color: #fff;
}
</style>
